require.config({
    paths: {
        vue: "../encaptool/encvue",
        iview: "../utiltool/iview/iview",
        jquery: "../utiltool/jquery/jquery.min",
        router: "../encaptool/encarouter",
        axios: "../encaptool/encaxios",
        echarts:"../utiltool/echarts/echarts.min"
    },
    shim: {
        iview: ["vue"]
    }
});
require(["vue", "iview","echarts","jquery", "router", "axios"], function (
    Vue,
    iview,
    echarts,
    $,
    Router,
    axios
) {
    Vue.use(iview);
    Vue.use(echarts);
    new Vue({
        el: "#ability",
        data() {
            return {
                columns: [
                    {
                        title: "车牌号",
                        key: "truckid",
                        align: "center",
                    },
                    {
                        title: "司机",
                        key: "name",
                        align: "center",
                    },
                    {
                        title: "送货单数",
                        key: "sum",
                        align: "center",
                    },
                    {
                        title: "排名",
                        type: "index",
                        align: "center",
                    },
                ],
                spanShow:true,
                tableShow:false,
                data: [],
                cardata: [],
                xdata:[],
                ydata:[],
                username: [],
                setting:{
                    method: "GET",
                    url: "/YF/public/api/getOrderBySum/"
                }
            };
        },
        mounted() {
            this.getcarRanking();
        },
        methods: {
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                  title: { text: '车辆排行' },
                  tooltip: {},
                  grid: {
                    left: '15%'
                  },
                  yAxis: {
                    name: '车牌号',
                    nameLocation: 'start',
                    data: this.ydata,
                    inverse: true
                  },
                  xAxis: {
                    name: '送货量'
                  },
                  series: [{
                    name: '送货量',
                    type: 'bar',
                    data: this.xdata,
                    itemStyle: {
                        normal:{
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#83bff6'},
                                    {offset: 0.5, color: '#188df0'},
                                    {offset: 1, color: '#188df0'}
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ]
                            )
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right'
                        }
                    }
                  }]
                });
            },
            getcarRanking(){
                axios.call(this, function (res) {
                    if (res.code === 0) {
                        this.data = res.data.slice(0,20);
                        this.cardata = res.data;
                        var length = this.cardata.length;
                        for(var i=0;i<length;i++){
                            this.ydata.push(this.cardata[i].truckid);
                            this.xdata.push(this.cardata[i].sum);
                        }
                        this.drawLine();
                        this.spanShow=false;
                        this.tableShow=true;
                    } else {
                        this.$Message.error({content:'未查到数据',closable: true});
                    }
                }.bind(this), {
                    setting: this.setting
                });
            }
        }, 
    });
});